<!DOCTYPE html>
<html lang="zh-cn">
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
  <meta name="description" content="">
  <meta name="author" content="">

  <title><%=seo_title%></title>
  <!-- Bootstrap core CSS -->
  <link href="/static/css/bootstrap.min.css" rel="stylesheet">
  <!-- Custom styles for this template -->
  <link href="/static/css/global.css?v=0.0.16" rel="stylesheet">
  <script type="text/javascript">G={module:'api', act:'raider', title:'攻略', ckprefix:'dcs_', ckpath:'/renly', __message:''};</script>
  <script src="/static/js/jquery-1.10.2.js"></script>
</head>

<body>
  <div class="headbar" style="display:none;">攻略列表</div>
  <div class="page_loading">正在加载..</div>
  <div class="listbox"></div>
  <center style="color:#aaa;margin:10px 0;">腾讯公司 版权所有</center>
</body>

<script type="text/javascript">
$(function(){
  // 异步加载列表
  loadList(1);

});

function loadList(page){
  page = page || 1;
  $.get('/api/raider/list/'+page, function(d){
    $('.more, .page_loading').remove();
    var html = '';
    if( d.length>0 ){
      $.each(d, function(k, v){
        var date_time = dt(v.time_update).substr(0, 16);
        var img_src = v.avatar ? 'http://203.195.195.168:8000/'+v.avatar : '/static/images/logo.png';
        html += '<a href="javascript:loadDetail('+v.id+')" data-detail_id="'+v.id+'">'
          +'<div class="section"><img class="fl" src="'+img_src+'" onerror="putDefaultLogo(this)">'
          +'<h2>'+v.title+'</h2><p>'+strip_tags(v.content).substr(0, 43)+'..</p><small class="fr">'+date_time+'</small></div>'
          +'</a>';
      });
      html += '<div class="more" data-page="'+(page+1)+'">加载更多..</div>';
    }
    else{
      html = '<div class="more disabled">没有了</div>';
    }
    $('.listbox').append(html);
    bindLoadMore();
  }, 'json');

  // 绑定滚动ajax事件
  $(window).scroll(function(){
      // 当滚动到最底部以上n像素时， 加载新内容
      if ($(document).height() - $(this).scrollTop() - $(this).height()<1) {
        $('.more').click();
      }
  });

}

// 点击加载更多
function bindLoadMore(){
  $('.more').on('click', function(){
    var $sf = $(this);
    if( $sf.hasClass('disabled') ){
      return;
    }
    else{
      loadList($sf.data('page'));
      $sf.html('<img src="/static/images/loading-16-2.gif" alt="loading" />').addClass('disabled');
    }
  });
}

// 加载详情
function loadDetail(id){
  // $('a[data-detail_id="'+id+'"]').attr('href', 'javascript:;');
  // $('.more').html('<img src="/static/images/loading-42-1.gif" alt="loading detail" />');
  // 链接点击后，启动页面loading
  // $('.listbox a').on('click', function(){
  $('.listbox').hide();
  $('body').prepend('<div class="page_loading">正在加载..</div>');

  $.get('/api/raider/detail/'+id, function(d){
    $('.page_loading').remove();
    document.title = '攻略详情 - 蓝礼';
    $('.headbar').html('<a href="/" class="fl">　</a>攻略详情').show();
    var html = '';
    html += '<h1>'+d.title+'</h1>';
    // html += '<div class="info">'+dt(d.time_update).substr(0, 16)+'</div>';
    html += '<div class="content">'+d.content.replace(/white-space: nowrap;/g, '')+'</div>';
    html = '<div class="detailbox">'+html+'</div>';
    $('.listbox').replaceWith(html);

    // 攻略图片居中显示
    $('.detailbox .content img').wrap('<div style="text-align:center;"></div>');

    // 绑定headbar a的事件
    $('.headbar>a.fl').on('click', function(){
      event.preventDefault();
      var url = $(this).attr('href');
      $('.detailbox, .headbar').remove();
      $('body').prepend('<div class="page_loading">正在加载..</div>');
      setTimeout(function(){
          window.location = url;
      }, 100);
    });
  }, 'json');
}

// 图片出错时，加载logo
function putDefaultLogo(that){
  $(that).attr('src', '/static/images/logo.png');
}
</script>

<script src="/static/js/global.js"></script>
<script src="/static/js/bootstrap.min.js"></script>

</html>
